<template>

  <div>
    <el-descriptions title="设备信息列表" :column="3" border>
      <el-descriptions-item
        label="设备编号："
        label-class-name="my-label"
        content-class-name="my-content"
        >{{ baseList.number }}</el-descriptions-item
      >
      <el-descriptions-item label="项目名称：">
        <el-button
          @click="hankFacilityProject(baseList.projectid)"
          type="text"
          size="big"
          >{{ baseList.projectName }}</el-button
        >
      </el-descriptions-item>
      <el-descriptions-item label="位置：">{{
        baseList.address
      }}</el-descriptions-item>
      <el-descriptions-item label="厂家：">{{
        baseList.manufactors
      }}</el-descriptions-item>
      <el-descriptions-item label="联网方式：">{{
        baseList.models
      }}</el-descriptions-item>
      <el-descriptions-item label="设备类型：">{{
        baseList.types
      }}</el-descriptions-item>
      <el-descriptions-item label="蓝牙：">{{
        baseList.types
      }}</el-descriptions-item>
      <el-descriptions-item label="IMIE编码：">{{
        baseList.brack1
      }}</el-descriptions-item>
      <el-descriptions-item label="设备开关：">
        <el-tag size="small" v-if="baseList.status === 1" type="success"
          >已启用</el-tag
        >
        <el-tag size="small" v-else-if="baseList.status === 0" type="danger"
          >已禁用</el-tag
        >
      </el-descriptions-item>

      <el-descriptions-item label="备注">
        <el-tag size="big">学校</el-tag>
      </el-descriptions-item>
      <!-- :contentStyle="{ 'text-align': 'right' }" -->
      <el-descriptions-item label="联系地址">{{
        baseList.projectAddress
      }}</el-descriptions-item>

      <el-descriptions-item label="硬件状态1：">{{
        baseList.address
      }}</el-descriptions-item>

      <el-descriptions-item label="硬件状态1：">{{
        baseList.address
      }}</el-descriptions-item>

      <el-descriptions-item label="硬件状态1：">{{
        baseList.address
      }}</el-descriptions-item>

      <el-descriptions-item
        label="使用记录"
        type="button"
        :contentStyle="{ color: '#409EFF' }"
      >
        <el-button
          @click="hankFacilityOrder(baseList.address)"
          type="text"
          size="big"
          >{{ baseList.address }}</el-button
        >
      </el-descriptions-item>
    </el-descriptions>
    <h4>设备工作类型</h4>
    <div>
      <el-table :data="tabledatas" border>
        <el-table-column label="tab1">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-show="show"
              v-model="scope.row.tab1"
            ></el-input>
            <span v-show="!show">{{ scope.row.tab1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="tab2">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-show="show"
             v-model="count"
            ></el-input>
            <span v-show="!show"
              ><div class="cell">
                <div
                  data-v-c1cf8528=""
                  class="el-input-number el-input-number--medium"
                  suffix-icon="el-icon-coin"
                  style="width: 150px"
                >
                  <span role="button" class="el-input-number__decrease">
                      <i class="el-icon-minus" v-on:click="subtract(scope.row.tab2)"></i>
                  </span >
                 <span role="button" class="el-input-number__increase">
                     <i class="el-icon-plus" v-on:click="add(scope.row.tab2)"></i>
                 </span>
                  <div class="el-input el-input--medium">
                    <!----><input
                      type="text"
                      autocomplete="off"
                      max="Infinity"
                      min="0"
                      v-model="scope.row.tab2"
                      class="el-input__inner"
                      role="spinbutton"
                      aria-valuemax="Infinity"
                      aria-valuemin="0"
                      aria-valuenow="2"
                      aria-disabled="undefined"
                    /><!----><!----><!----><!---->
                  </div>
                </div>
              </div>
              </span
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button @click="show = true">编辑</el-button>
      <el-button @click="show = false">提交</el-button>
    </div>
  </div>
</template>

<style>
.my-label {
  background: #e1f3d8;
}

.my-content {
  background: #fde2e2;
}
</style>
<script>
export default {
  name: "FacilityBase",
  data() {
    return {
      number: this.$route.params.number, //这样我们的id就拿到了然后在接口处拼接
      baseList: [],
      tabledatas: [
        { tab1: "111", tab2: 2.2 },
        { tab1: "aaa", tab2: 1.0 },
      ],
      show: false,
    };
  },
  created() {
    this.infobase();
  },
  methods: {
      add:function(count){
        count=count+0.1;
         alert("+ "+count)
       },
        subtract:function(count){
            
          if (count<=0){
            alert('受不了啦，宝贝不能再减少啦')
            count=0;
          }else {
            count=count-0.1;
          }
           alert("- "+count)
        },

///  查询设备的信息
    infobase() {
      //   this.$axios
      //     .get("/BaseInfoController/infoBase/" + this.$route.params.id)
      //     .then((res) => {
      //         console.log(res.data.data)
      //       //alert(res.data.data.number);
      //       this.number=res.data.data.number
      //       this.baseList=res.data.data
      //     });
      this.$axios
        .get("/tFacilityBase/list", {
          params: {
            page: 0,
            limit: 5,
            type: null,
            model: null,
            math: this.$route.params.number,
            projectid: null,
            address: null,
          },
        })
        .then((res) => {
          console.log(res);
          this.baseList = res.data.data[0];
        });
    },
    /// 点击到这个设备的一个项目明晰
    hankFacilityProject(row) {
      alert(row);
    },
    /// 点击到这个设备的一个使用订单记录
    hankFacilityOrder(row) {
      alert(row);
    },
  },
};
</script>

<style scoped>
</style>